<!--
 * @Author: qiaoxin
 * @Date: 2024-04-09 19:35:26
 * @LastEditors: qiaoxin
 * @LastEditTime: 2024-04-16 12:03:50
 * @Description: 
 * @FilePath: \erp-app\src\pages\pm\requirement\detail.vue
-->

<route lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '研发项目立项评审',
    navigationStyle: 'custom',
  },
}
</route>

<template>
  <page-meta :root-font-size="setting.rootFontSize"></page-meta>
  <view style="display: flex; flex-direction: column; height: 100vh; background-color: #f2f2f1">
    <view style="position: sticky; top: 0; z-index: 9999">
      <wd-navbar title="研发项目立项评审" :bordered="false" safeAreaInsetTop>
        <template #left>
          <wd-icon name="thin-arrow-left" size="22px" color="white" @click="goBack"></wd-icon>
        </template>
      </wd-navbar>
    </view>
    <view style="flex: 1; overflow: auto">
      <view style="padding: 10rpx; margin-bottom: 24rpx; background-color: white">
        <view style="margin-top: 10rpx; font-size: 50rpx; color: #bc0000; text-align: center">
          山东泰和科技股份有限公司文件
        </view>
        <view style="width: 100%; margin: 10px 0; font-weight: bolder; text-align: center">
          泰和研发字【{{ form.petitionWord }}】{{ form.petitionNumber }}号
        </view>
        <view style="width: 100%; height: 1px; margin-top: 10rpx; background: #bc0000"></view>
        <view style="margin: 10rpx 0; font-size: 36rpx; text-align: center">项目立项审批表</view>
        <view style="overflow: auto" class="table-container">
          <table class="analysis-table">
            <tbody>
              <tr>
                <td class="item-petition-label">产品</td>
                <td>
                  {{ form.invName }}
                </td>
              </tr>
              <tr>
                <td class="item-petition-label">规格</td>
                <td>
                  {{ form.invStd }}
                </td>
              </tr>
              <tr>
                <td class="item-petition-label">项目分类</td>
                <td>
                  {{ form.itemDept }}
                </td>
              </tr>
              <tr>
                <td class="item-petition-label">项目类别</td>
                <td>
                  {{ form.itemCategory }}
                </td>
              </tr>

              <tr>
                <td class="item-petition-label">项目归属</td>
                <td>
                  {{ form.itemBelong }}
                </td>
              </tr>

              <tr>
                <td class="item-petition-label">二级项目</td>
                <td>
                  {{ form.secondLevelItem }}
                </td>
              </tr>

              <tr>
                <td class="item-petition-label">是否募投</td>
                <td>
                  {{ form.isFundraising }}
                </td>
              </tr>

              <tr>
                <td class="item-petition-label">拟稿人</td>
                <td>
                  {{ form.proposerName }}
                </td>
              </tr>

              <tr>
                <td class="item-petition-label">申请部门</td>
                <td>
                  {{ form.proposerDept }}
                </td>
              </tr>

              <tr>
                <td class="item-petition-label">项目名称</td>
                <td>
                  {{ form.itemName }}
                </td>
              </tr>

              <tr>
                <td class="item-petition-label">立项目的</td>
                <td>
                  {{ form.objective }}
                </td>
              </tr>

              <tr>
                <td class="item-petition-label">项目技术路线(拟采用)</td>
                <td>
                  <view>
                    <view>1、反应机理:</view>
                    <wd-img
                      :width="200"
                      :height="100"
                      mode="aspectFit"
                      :src="form.chemicalUrl"
                      :enable-preview="true"
                    />
                    <view>2、涉及主要反应步骤描述:</view>
                    {{ form.petitionDesc }}
                  </view>
                </td>
              </tr>

              <tr>
                <td class="item-petition-label">简述项目产品性能及主要用途</td>
                <td>
                  <view>
                    <view>1、产品性能:</view>
                    {{ form.petitionPerformance }}
                    <view>2、主要用途:</view>
                    {{ form.petitionBriefly }}
                  </view>
                </td>
              </tr>

              <tr>
                <td class="item-petition-label">附件</td>
                <td>
                  <view class="form-file-view">
                    <view
                      v-for="(file, index) in form.fileEntityList"
                      :key="file.fileUrl"
                      class="info-row-item"
                    >
                      <text @click="previewFileHandle(file.fileUrl)">{{ file.fileName }}</text>
                    </view>
                  </view>
                </td>
              </tr>
            </tbody>
          </table>
        </view>
      </view>

      <th-card
        title="审核信息"
        v-if="form.status == '1' || form.status == '2' || form.status == '3'"
      >
        <view class="row-list">
          <view class="row" v-if="form.id && form.taskId">
            <!-- <view class="label">审核意见</view> -->
            <view class="value">
              <view class="mb2 mt2">
                <h5>审核意见</h5>
              </view>
              <wd-textarea
                type="textarea"
                v-model="comment"
                rows="6"
                placeholder="请输入审核意见"
                style="border: 1px solid #f7f7f7"
              ></wd-textarea>
            </view>
          </view>
          <view>
            <!-- <view class="mb2 mt2">
                <h5>流转详情</h5>
              </view> -->
            <!-- <flowDetailsTable
              ref="flowDetailsTableRef"
              :processInstanceId="form.instanceId"
            ></flowDetailsTable> -->
            <flowTable ref="flowDetailsTableRef" :processInstanceId="form.instanceId"></flowTable>
          </view>
        </view>
      </th-card>
    </view>

    <view class="flow-btn-fixed">
      <view class="btn_group" style="width: 100%">
        <view class="btn danger" @click="oncomplete(1)" v-if="form.id && form.taskId">
          <image src="../../../static/reject.png" class="btn-icon"></image>
          拒绝
        </view>
        <view class="btn primary" @click="oncomplete(0)" v-if="form.id && form.taskId">
          <image src="../../../static/tongyi.png" class="btn-icon"></image>
          同意
        </view>
        <view
          class="btn primary"
          @click="onRevokeShow()"
          v-if="!(form.taskId || !(form.id && form.status == 1))"
        >
          <image src="../../../static/rovoke.png" class="btn-icon"></image>
          撤回
        </view>
        <view
          class="btn primary"
          @click="onCancelApprover()"
          v-if="(form.status == '2' || form.status == '3') && isCanCancelApprover"
        >
          <image src="../../../static/rovoke1.png" class="btn-icon"></image>
          弃审
        </view>
      </view>
    </view>
    <wd-popup v-model="revokeShow" position="bottom" @close="handleClose">
      <view style="display: flex; flex-direction: column; height: 100%">
        <wd-textarea
          v-model="revokeComment"
          placeholder="请填写撤回原因"
          no-border
          prop="revokeComment"
          class="reovke-textarea"
        />
        <view class="flow-btn-fixed">
          <view class="btn_group" style="width: 100%">
            <view class="btn danger" @click="handleClose">取消</view>
            <view class="btn primary" @click="onRevoke">撤回</view>
          </view>
        </view>
      </view>
    </wd-popup>
  </view>
</template>

<script lang="ts" setup>
import { useSetting } from '@/stores/setting';
import { useUserStore } from '@/stores/user';
import {
  selectPetitionById,
  completeTask,
  revokeProcess,
  reviveProcess,
} from '@/service/itemPetition';
import { listLastNodePerson, selectTaskByProcessInstanceId } from '@/service/pm-requirement';
import showModal from '@/utils/modal';

const setting = useSetting();
const userStore = useUserStore();
const flowDetailsTableRef: any = ref({});

// 提交表单数据
const form = reactive({
  id: null,
  proposer: null,
  proposerName: null,
  proposerDept: null,
  tenantName: null,
  itemDept: null,
  itemName: null,
  itemCategory: null,
  itemBelong: null,
  secondLevelItem: null,
  itemCode: null,
  isFundraising: null,
  status: null,
  itemDeptId: null,
  tableCode: null,
  createName: null,
  creator: null,
  personCode: null,
  invName: null,
  invStd: null,
  sourceDocuments: '0',
  demandCode: null,
  demandId: null,
  taskCode: null,
  taskId: null,
  instanceId: null,
  chemicalUrl: null,
  chemicalInfo: null,
  fileEntityList: [],
  checkUser: null,
  objective: null,
  petitionDesc: null,
  petitionBriefly: null,
  petitionNumber: null,
  petitionWord: null,
  petitionPerformance: null,
  requirements: null,
  rdFlag: null,
  reviewStatus: null,
  rdProjectUserEntity: [],
  opinion: null,
});

const init = (params) => {
  uni.showLoading();
  console.log('------');
  selectPetitionById(params.id)
    .then((res) => {
      console.log('res', res);
      Object.assign(form, res.data);
      form.petitionNumber = numberStringHandle(form.petitionNumber);
      // getCancelApprover();
      if (res.data.instanceId) {
        selectTaskByProcessInstanceId({
          processInstanceId: res.data.instanceId,
        })
          .then((res) => {
            form.taskId = res.data && res.data.taskId ? res.data.taskId : null;
          })
          .catch(() => {
            form.taskId = null;
          });
        getCancelApprover();
        console.log('form', form);
      }
      nextTick(() => {
        try {
          flowDetailsTableRef.value && flowDetailsTableRef.value.getFlowDetails();
        } catch (error) {
          console.log('flowDetailsTableRef error ', error);
        }
      });
    })
    .finally(() => {
      uni.stopPullDownRefresh();
      uni.hideLoading();
    })
    .catch((err) => {
      console.log('err', err);
    });
};

onLoad((options) => {
  const params = options.params;
  let obj = {};

  if (params) {
    obj = JSON.parse(params);
  } else {
    obj = options;
  }

  init({
    id: obj.id,
  });
});

onPullDownRefresh(() => {
  init({
    id: form.id,
  });
});

const isCanCancelApprover = ref(false); // 是否能弃审
const getCancelApprover = () => {
  listLastNodePerson({
    processInstanceId: form.instanceId,
  })
    .then((res) => {
      const dataList = res.data;
      const username = userStore.userInfos.user.username;
      if (dataList.find((item) => item == username)) {
        isCanCancelApprover.value = true;
      } else {
        isCanCancelApprover.value = false;
      }
    })
    .finally(() => {});
};

const goBack = () => {
  uni.navigateBack();
};

const previewFileHandle = (file) => {
  uni.navigateTo({
    url: '/pages/pm/preview-online?url=' + file,
  });
};

// 审核信息
const comment = ref('');
const oncomplete = (type) => {
  if (type == '1' && !comment.value) {
    uni.showToast({
      title: '请填写审核意见',
      icon: 'none',
      mask: true,
    });
    return;
  }

  const params = {
    // ...form,
    taskId: form.taskId,
    comment: comment.value,
    id: form.id,
    approve: type == 0 ? true : false,
  };
  uni.showLoading({
    mask: true,
  });
  completeTask(params, form.id)
    .then((res) => {
      if (res.code == 0) {
        uni.showToast({
          title: '单据审核成功',
          icon: 'none',
          mask: true,
        });
        // uni.navigateBack({});
        form.instanceId = '';
        init({
          id: form.id,
        });
        uni.$emit('refresh');
        // nextTick(() => {
        //   flowDetailsTableRef.value.getFlowDetails();
        // });
      } else {
        uni.showToast({
          mask: true,
          title: `单据审核失败，失败原因：${res.msg}`,
          icon: 'none',
        });
      }
    })
    .finally(() => {
      uni.hideLoading();
    });
};

// 撤回
const revokeComment = ref('');
const revokeShow = ref(false);

const onRevokeShow = () => {
  revokeShow.value = true;
};
const handleClose = () => {
  revokeShow.value = false;
};
const onRevoke = () => {
  showModal({
    title: '提示',
    content: '是否撤回该单据',
    showCancel: true,
    confirm: () => {
      uni.showLoading({
        mask: true,
      });
      revokeProcess({
        id: form.id,
        instanceId: form.instanceId,
        comment: revokeComment.value,
      })
        .then((res) => {
          if (res.code == 0) {
            uni.showToast({
              mask: true,
              title: `单据${form.demandCode}撤回成功`,
              icon: 'none',
            });
            handleClose();
            init({ id: form.id });
          } else {
            uni.showToast({
              mask: true,
              title: `单据${form.demandCode}撤回失败，失败原因：${res.msg}`,
              icon: 'none',
            });
          }
        })
        .finally(() => {
          uni.hideLoading();
        });
    },
  });
};

const onCancelApprover = () => {
  showModal({
    title: '提示',
    content: '是否弃审该单据',
    showCancel: true,
    confirm: () => {
      uni.showLoading({
        mask: true,
      });
      reviveProcess(form.id)
        .then((res) => {
          if (res.code == 0) {
            uni.showToast({
              mask: true,
              title: `单据${form.demandCode}弃审成功`,
              icon: 'none',
            });
            form.instanceId = '';
            init({ id: form.id });
            // nextTick(() => {
            //   flowDetailsTableRef.value.getFlowDetails();
            // });
          } else {
            uni.showToast({
              mask: true,
              title: `单据${form.demandCode}弃审失败，失败原因：${res.msg}`,
              icon: 'none',
            });
          }
        })
        .finally(() => {
          uni.hideLoading();
        });
    },
  });
};

const numberStringHandle = (d) => {
  if (d === null) return '';
  let s = '';

  if ((d + '').length < 3) {
    const n = 3 - (d + '').length;
    for (let i = 0; i < n; i++) {
      s += '0';
    }
  }

  return s + d;
};
</script>

<style lang="scss" scoped>
@import '../experiment/components/table';

.block .content {
  padding: 0 !important;
}

.card-detail {
  padding: 0 !important;
}

.wd-cell {
  padding-left: 0 !important;
}

.wd-card__title {
  border-left: 4px solid #2e5cf6 !important;
}

.pm-table {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 0 30rpx;

  .pm-title {
    box-sizing: border-box;
    padding-left: 20rpx;
    margin: 40rpx 0;
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    border-left: 8rpx solid #2e5cf6;
    border-radius: 4rpx;
  }

  .pm-row {
    display: flex;
    min-height: 60rpx;
    border-bottom: 1px solid #f6f0f0;

    .pm-label {
      display: flex;
      align-items: center;
      width: 20%;
      font-size: 26rpx;
      color: #979494;
    }

    .pm-value {
      display: flex;
      flex: 1;
      align-items: center;
      font-size: 26rpx;
      color: #333;
    }
  }
}

:deep(.label) {
  width: 160rpx !important;
}

.result-tag {
  padding: 6rpx 14rpx;
  margin: 2rpx 0;
  font-size: 24rpx;
  color: white;
  background-color: #87d068;
  border-radius: 4rpx;
}

.info-list {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.info-list-main {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 10rpx;
  margin: 10rpx 0;
  border: 1px solid #e3e3e3;
  border-radius: 8rpx;

  .info-list-row {
    display: flex;
    width: 100%;

    .info-list-label {
      width: 150rpx;
      font-size: 28rpx;
      color: #808080;
    }

    .info-list-value {
      display: flex;
      flex: 1;
      align-items: center;
      width: 0;
      word-break: break-all;
      white-space: pre-line;
    }
  }
}

.form-demandDesc {
  align-items: flex-start !important;

  .text {
    word-break: break-all;
  }
}

// .info-row-item {
//   padding: 6rpx 0;
//   word-break: break-all;
// }

.info-row-item {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 6rpx 0;
  color: blue;
  word-break: break-all;
}

.text {
  word-break: break-all;
  word-wrap: break-word;
}

:deep(.wd-collapse-item__body) {
  padding: 0 !important;
}

// :deep(.wd-collapse-item__wrapper){
//   height:auto !important;
// }

:deep(.wd-collapse-item__body) {
  padding: 10rpx;
}

:deep(.wd-collapse-item__header) {
  padding-right: 10rpx;
  padding-left: 10rpx;
}

.item-petition-label {
  width: 20vw;
}

.flow-btn-fixed {
  width: 100%;
  background-color: white;
  border-top: 1px solid #f2f2f1;
}

.btn_group {
  display: flex;
  justify-content: space-between;

  // margin: 0rpx 0 20rpx;
  // border-bottom: 1px solid #f2f2f1;

  .btn {
    display: flex;

    // width: 49%;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    // height: 40px;
    min-height: 40px;
    padding: 10rpx 0;
    font-size: 24rpx;
    color: black;

    // background-color: white !important;
    background-color: #dbecff !important;
    border-left: 1px solid #f7f7f7;
    border-radius: 0 !important;

    // color: white;
    border-radius: 6rpx;

    .btn-icon {
      width: 40rpx;
      height: 40rpx;
      margin-bottom: 8rpx;
    }
  }

  .danger {
    background-color: #f56c6c;
  }

  .primary {
    background-color: #409eff;
  }
}
</style>
